{% block body %}
<link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
<title>KG-SEARCH</title>
<div class="container">
    <div class="row">
        <header class = "panel-heading">
            关键词搜索
        </header>
        <div class = "panel-body">
            <form method="POST">
            <div style="display: flex">
            {{ form.hidden_tag() }}
                <div>
                    {{ form.keyword }}
                    <button class="layui-btn layui-btn-normal" type="submit" class="update">SEARCH</button>
                </div>
            </div>
            </form>
        </div>
    {% if nothing %}
    <div class = "panel-body">
         <h2>Sorry, Not Found In Database.</h2>
    </div>
    {% endif %}

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>查询帮助</legend>
    </fieldset>
    <div class="layui-collapse" lay-filter="test">
      <div class="layui-colla-item">
        <div class="layui-colla-content layui-show">
          <p>关键词空格分开 <br>1、一个关键词支持: 例如：上海 or 广东广州 or 包河区 or 确诊 or 王某<br>2、两个关键词支持：例如：隔离 上海 or 苏州 男性 or 广州 2月2日 <br>3、三个关键词支持：例如：2月2日 苏州 确诊</p>
        </div>
      </div>
    </div>
    <!--relation start-->
    {% if data %}
        <div class = "result" style = " display: flex">
            <div class = "graph-div"><div id="graph" style="width: 700px; height:700px; margin: 10px; padding:5px; border-radius:5px; box-shadow:0 0 8px silver;"></div></div>
            <div class="table-div" style="width: 50%; margin: 10px; padding:5px; border-radius:5px; box-shadow:0 0 8px silver;"><table class="layui-hide" id="graph-table"></table></div>
        </div>
    {% endif %}
    </div>
    </div>
    {% if data %}
    <script src="../static/js/echarts.js"></script>
    <script src="../static/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
        let data = {{ data|safe }};
        let links = {{ links|safe }};
        let categories = {{ categories|safe }};
        console.log({{ links|safe }});
        console.log({{ categories|safe }});

        let myChart = echarts.init(document.getElementById('graph'));
        option = {
            color: [
                "#c12e34",
                "#0098d9",
                "#e6b600",
                "#2b821d",
                "#005eaa",
                "#339ca8",
                "#cda819",
                "#32a487"
            ],
            tooltip: {},
            legend: [{
                x: 'center',
                y: 'top',
                orient:'horizontal',
                data: categories.map(function (a) {
                    return a.name;
                }),
            }],
            zoom: 2.0,
            animation: true,
            series : [
                {
                    type: 'graph',
                    layout: 'force',
                    data: data,
                    links: links,
                    categories: categories,
                    roam: true,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12,
                            },
                        }
                    },
                    edgeLabel:{
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12
                            },
                            formatter: "{c}"
                        }
                    },
                    lineStyle: {
                        normal: {
                            opacity: 0.6,
                            width: 1.3,
                            curveness: 0,
                            color:"#262626"
                        }
                    },
                    force: {
                        repulsion: 600
                    }
                }
            ]
        };
        myChart.setOption(option);
    </script>
    <script>
        let format_triple = {{ format_triple|safe }};
        layui.use('table', function(){
          var table = layui.table;
          table.render({
            elem: '#graph-table'
            ,cols: [[ //标题栏
              {field: 'source', title: 'Source', width: 200}
              ,{field: 'relation', title: 'Relation', width: 100}
              ,{field: 'target', title: 'Target', Width: 200}
            ]]
            ,data: format_triple
            ,page: true //是否显示分页
            ,limits: [5, 10, 15, 20]
            ,limit: 15 //每页默认显示的数量
            ,even: true
          });
        });
    </script>
{% endif %}
{% endblock %}
